<template>
  <div>
    <CommonCard title="累计用户数" value="1.283.23">
      <template>
        <v-echarts :options="getOptions()" />
        <!-- <div
          id="total-users-chart"
          :style="{ width: '100%', height: '100%' }"
        /> -->
      </template>

      <template v-slot:footer>
        <div class="total-users-footer">
          <span>日同比 </span>
          <span class="emphasis">￥30000000</span>
          <div class="increase"></div>
          <span class="month">月同比 </span>
          <span class="emphasis">￥30000000</span>
          <div class="decrease"></div>
        </div>
      </template>
    </CommonCard>
  </div>
</template>

<script>
import commonCardMixin from "../../mixins/commonCardMixin";
export default {
  mixins: [commonCardMixin],
  methods: {
    getOptions() {
      return {
        grid: {
          top: 0,
          bottom: 0,
          lef: 0,
          right: 0,
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          show: false,
        },
        series: [
          {
            type: "bar",
            stack: "总量", //合并图表
            data: [100],
            barWidth: 10,
            itemStyle: {
              color: "#5e8a49",
            },
          },
          {
            stack: "总量", //合并图表
            type: "bar",
            data: [210],

            itemStyle: {
              color: "#eee",
            },
          },
          // 自定义图像---三角形
          {
            type: "custom", //自定义
            stack: "总量",
            data: [100],
            renderItem: (params, api) => {
              console.log("params, api", params, api);
              const value = api.value(0);
              const endPoint = api.coord([value, 0]); //计算坐标
              console.log(endPoint);
              //  导出货值的图形
              return {
                type: "group", // 图形分组
                // type: "path", // 线段图形
                position: endPoint, //绘图坐标系
                children: [
                  {
                    type: "path", // 线段图形
                    shape: {
                      //形状   d 加入svg 赋值出来的d
                      d: "M196.70908204 358.94393566l318.18515623 318.18515624 317.2209961-317.22099609z",
                      // d: "M789.11115837 646.52193155l-279.65492248-279.65492248-278.8075161 278.8075161z",
                      x: -5,
                      y: -20,
                      width: 10,
                      height: 10,
                      layout: "cover",
                    },
                    style: {
                      fill: "#45c946", // 填充色
                    },
                  },
                  {
                    type: "path", // 线段图形
                    shape: {
                      //形状   d 加入svg 赋值出来的d
                      // d: "M196.70908204 358.94393566l318.18515623 318.18515624 317.2209961-317.22099609z",
                      d: "M789.11115837 646.52193155l-279.65492248-279.65492248-278.8075161 278.8075161z",
                      x: -5,
                      y: 10,
                      width: 10,
                      height: 10,
                      layout: "cover", //自定义缩放 根据
                    },
                    style: {
                      fill: "#45c946", // 填充色
                    },
                  },
                ],
              };
            },
          },
        ],
      };
    },
  },
  // mounted() {
  //   // 获取bom;、
  //   const chartDom = document.getElementById("total-users-chart");

  //   const charts = this.$echarts.init(chartDom); //charts 初始化
  //   charts.setOption();
  // },
};
</script>

<style lang="scss" scoped>
.total-users-footer {
  display: flex;
  align-items: center;
  .month {
    margin-left: 10px;
  }
}
</style>
 <svg t="1628616086371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3254" width="200" height="200"><path d="M789.11115837 646.52193155l-279.65492248-279.65492248-278.8075161 278.8075161z" p-id="3255"></path></svg>